<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://g.alicdn.com/main-search/new-search-suggest/0.0.5/bundle.css">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
	</head>
	<body>
		<img src="https://imgcps.jd.com/ling4/100019386660/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa75/6e5a0902/cr/s/q.jpg" alt="">
		<div id="live2d-widget">
			<canvas id="live2dcanvas"></canvas>
		</div>
	</body>
	
	<script>
		L2Dwidget.init({
			"model": {
				jsonPath: "https://unpkg.com/live2d-widget-model-shizuku/assets/shizuku.model.json", //这里改模型，前面后面都要改
				"scale": 1
			},
			"display": {
				"position": "left", //设置看板娘的上下左右位置
				"width": 200,
				"height": 200,
				"hOffset": 70,
				"vOffset": 0
			},
			"mobile": {
				"show": true,
				"scale": 0.5
			},
			"react": {
				"opacityDefault": 1, //设置透明度
				"opacityOnHover": 0.2
			}
		});
		window.onload = function() {
			$("#live2dcanvas").attr("style",
				"position: fixed; opacity: 1; right: 0px; bottom: 0px; z-index: 1; pointer-events: none;")
		}
	</script>
	<script>
		// JSONP原理:
		// 同源策略是浏览器最核心也最基本的安全功能,但是引入资源(img  link=> css  script => js)不受同源策略的限制(默认不受CORS协议影响) => 利用这个机制是否可以实现跨域访问 =>JSONP
		
		
		
		
	</script>


</html>
